/**
* 人员选择
*/
<template>
  <!-- 人员选择 -->
  <el-dialog :title="title" :visible.sync="showAble" width="50%" @click='closeDialog()'>
    <el-table size="small" :data="list" highlight-current-row v-loading="loading"
              ref="multipleTable"
              element-loading-text="拼命加载中"  @selection-change="selectUser"
              style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="company" label="公司名称">
      </el-table-column>
      <el-table-column sortable prop="userName" label="姓名">
      </el-table-column>
      <el-table-column sortable prop="loginName" label="登录名">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"/>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click='closeDialog("perm")'>关闭</el-button>
      <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {userList} from "../api/userMG";
import Pagination from './Pagination'

export default {
  name: 'UserSelector',
  components: {
    Pagination
  },
  props: {
    showAble: Boolean,
    multiple: Boolean,
    title: String
  },
  data() {
    return {
      formInline: {
        page: 1,
        perPage: 10,
        filters: [
          {placeholder: "请输入登录名", fieldName: "loginName", compare: "like", fieldValue: ""},
          {placeholder: "请输入用户名", fieldName: "userName", compare: "like", fieldValue: ""}
        ],
        isLock: ''
      },
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      list: [],
      loading: false,
      selectedList: []
    }
  },
  created() {

  },
  watch: {
    showAble(o, n) {
      if(!n) {
        this.getdata(this.formInline);
      }
    }
  },
  methods: {
    // 分页插件事件
    callFather(param) {
      this.searchParams.page = param.currentPage;
      this.searchParams.perPage = param.pageSize;
      this.getList(this.searchParams);
    },
    selectUser(selection, row) {
      if(selection && selection.length > 1 && !this.multiple) {
        this.$message.error('请单选数据！');
        this.$refs.multipleTable.toggleRowSelection(selection[1]);
      } else {
        this.selectedList = selection;
      }
    },
    getdata(parameter) {
      this.loading = true;
      userList(parameter)
        .then(res => {
          if (res.success) {
            if (res.data) {
              this.pageparm.currentPage = res.data.pageNum;
              this.pageparm.pageSize = res.data.pageSize;
              this.pageparm.total = res.data.total;
              this.list = res.data.list;
            }
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error('刷新失败，请稍后再试！')
        });
      this.loading = false

    },
    submitForm() {
      this.$emit("resultHandler", this.selectedList);
    },
    closeDialog() {
      this.$emit("closeDialog", {active: false});
    }
  }
}
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>
